<template>
  <div id="bar">
    <div class="dragRectTop"></div>
    <h2 style="text-align:center;">动态航班演示控制</h2>
    <template>
    <div class="block" style="margin: auto;margin-top: 5%;width: 73%;">
      <div class="demonstration" style="font-size:16px">演示时间 &ensp;{{nowtime}}</div>
      <div><el-slider v-model="currentTime" :max="657" :show-tooltip="false"></el-slider></div>
      
    </div>
    </template>
    <div style="text-align: center;">
      <el-button v-if="this.flag === true" type="success" @click="start" style="width:60px;height:30px;padding:0%">启动</el-button>
      <el-button v-else type="warning" @click="stop" style="width:60px;height:30px;padding:0%">暂停</el-button>
      <el-button type="primary" @click="reset" style="width:60px;height:30px;padding:0%">重置</el-button>
    </div>
    <br>
    <div class="dragRectBottom"></div>
  </div>
</template>

<script>
import ECharts from "@/components/ECharts";

var Time = 0;
export default {
  components: {
    ECharts,
  },
  data: function () {
    return {
      currentTime:0,
      updateTime:null,
      nowtime:"",
      flag: false,
    }
  },
  methods: {
    start() {
      const AirlinesJson = require("../static/json/Airlines_A319");
      this.updateTime = setInterval(() => {
      this.currentTime ++;
      if(this.currentTime >= AirlinesJson.length)
        this.currentTime = 0;
    }, 3000)  //更新
this.flag = !this.flag
    },
    stop(){
      clearInterval(this.updateTime)
this.flag = !this.flag
    },
    reset() {
      this.currentTime = 0;
    },
  },
  watch: {
    currentTime: function () {
      this.$emit("changeTime", this.currentTime);
      let myDate = new Date("2020-11-30 6:0:0");
      myDate.setMinutes(myDate.getMinutes() + this.currentTime * 15);
      let year = myDate.getFullYear();
      let month = myDate.getMonth() + 1;
      let date = myDate.getDate();
      let hour =
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours();
      let minute =
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes();
      let second =
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds();
      this.nowtime = `${year}年${month}月${date}日${hour}:${minute}:${second}`;
    },
  },
  created() {
    // 引入机场节点。注意！可能该节点不在地图内
    const AirlinesJson = require("../static/json/Airlines_A319");
    this.updateTime = setInterval(() => {
      this.currentTime++;
      if (this.currentTime >= AirlinesJson.length) this.currentTime = 0;
    }, 3000); //更新
  },
};
</script>

<style scoped>
#bar {
  /* background-image: url(../assets/line.png); */
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  position: relative;
  background: rgba(255, 255, 255, 0.1);
}

.title {
  text-align: center;
  position: relative;
}
.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  margin: -50px 0 0 -50px;
}
.dragRectTop {
  width: 100%;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

.dragRectTop::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid skyblue;
  border-top: 2px solid skyblue;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.dragRectTop::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid skyblue;
  border-top: 2px solid skyblue;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.dragRectBottom {
  width: 100%;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.dragRectBottom::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid skyblue;
  border-bottom: 2px solid skyblue;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
}

.dragRectBottom::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid skyblue;
  border-bottom: 2px solid skyblue;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>